<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-table v-loading="listLoading"
                :data="cfgGloballist"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%">
        <el-table-column align="center"
                         label="序号"
                         width="80">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column width="180px"
                         align="center"
                         label="参数名">
          <template slot-scope="{row}">
            <span>{{ row.paramName }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="180px"
                         label="参数值">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.paramValue"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.paramValue }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="300px"
                         align="left"
                         label="参数说明">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.remark"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px"
                         align="center"
                         label="最后更新时间">
          <template slot-scope="{row}">
            <span>{{ formatTime(row.modifyTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="操作"
                         width="100">
          <template slot-scope="{row}"
                    v-if="hasPermission('/monitor/global-update')">
            <template v-if="row.edit">
              <el-tooltip class="item"
                          effect="light"
                          content="取消"
                          placement="top-start">
                <el-button size="mini"
                           type="warning"
                           icon="el-icon-close"
                           circle
                           @click="cancelEdit(row)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item"
                          effect="light"
                          content="提交"
                          placement="top-start">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-check"
                           circle
                           @click="confirmEdit(row)">
                </el-button>
              </el-tooltip>
            </template>
            <template v-else>
              <el-tooltip class="item"
                          effect="light"
                          content="编辑"
                          placement="top-start">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-edit"
                           circle
                           @click="row.edit=true">
                </el-button>
              </el-tooltip>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

</template>
<script>
import { formatDate } from "@/utils/date";
import { hasPermission } from "@/utils/dict";
import { apiGlobalList, apiGlobalUpdate } from "@/api/monitor";

export default {
  name: "MonitorCfgGlobal",

  data() {
    return {
      listLoading: false,
      myMap: null,
      cfgGloballist: [{ "id": 1, "paramName": "Christopher", "paramValue": "Michelle", "remark": "Vocxn Rgc Oqhcfnmoj", "modifyTime": 1459537939312 }]
    };
  },

  created() {
    this.callCfgGlobalList();
  },

  methods: {
    hasPermission(url) {
      return hasPermission(url)
    },

    formatTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },

    cancelEdit(row) {
      row.paramValue = row.originalParamValue;
      row.remark = row.originalRemark;
      row.edit = false;
    },

    confirmEdit(row) {
      row.edit = false
      apiGlobalUpdate(row).then(response => {
        this.messageSuccess();
      });
    },

    messageSuccess() {
      this.$message({
        type: 'success',
        message: '提交成功!',
        duration: 3000
      });
    },

    callCfgGlobalList() {
      this.listLoading = true;
      apiGlobalList()
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            this.cfgGloballist = data.map(v => {
              this.$set(v, 'edit', false); // https://vuejs.org/v2/guide/reactivity.html
              //v.edit = false;
              v.originalParamValue = v.paramValue; //  will be used when user click the cancel botton
              v.originalRemark = v.remark;
              return v;
            })

            this.cfgGloballist = data;
          }
        });
      this.listLoading = false;
    },
  }
};
</script>

<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
